<style>
.perms ul li {list-style: none; float: left;width: 130px;}
.perms lable {height:20px;line-height: 20px;}
</style>
<script type="text/javascript">
$(document).ready(function(){
	
	var _toolbar = [
		{
			id:'btnAddRole',
			text:'添加角色',
			iconCls:'icon-add',
			handler:function(){
				addRole();
			}
		}
	];
	$('#datagrid').datagrid({  
		title:'角色管理',
	    url:'rolesData',  
	    toolbar:_toolbar,
	    columns:[[  
	        {field:'id',title:'ID',width:50,align:'center'},  
	        {field:'name',title:'名称',width:150}, 
	        {field:'add_time',title:'创建时间',width:200,align:'center'}, 	 
	        {field:'action',title:'操作',width:150,align:'center',
	        	formatter:function(value,row,index){
	        		var a = "<a href='javascript:editRole()'><i class='fa fa-edit fa-2x' style='color:#888;'></i></a> ";
	        		//var b = "<a href='javascript:editMenu()'>菜单编辑</a> ";
	        		var c = "<a href='javascript:delRole("+row.id+")'><i class='fa fa-remove fa-2x' style='color:#888;'></i></a> ";
	        		return a + " " + c;
	        	}
	        }
	    ]],
		pagination:true,
		rownumbers:true,
		pageSize:30,
		singleSelect:true,
		onDblClickRow:function(){
			editRole();
		}
	});  
    
	$(".s_all").click(function(){
		var checked = false;
		if($(this).text() == "全选"){
			$(this).text("反选");
			checked = true;
		}else{
			$(this).text("全选");
			checked = false;
		}
		$("input[name=perm_ids]").each(function(){
			$(this).attr("checked",checked);
		});
	});
	
	$(".s_menu_all").click(function(){
		var checked = false;
		if($(this).text() == "全选"){
			$(this).text("反选");
			checked = true;
		}else{
			$(this).text("全选");
			checked = false;
		}
		$("input[name=menu_ids]").each(function(){
			$(this).attr("checked",checked);
		});
	});
	
});

function addRole(){
	$('#dialog').dialog('open').dialog('setTitle','新增用户角色');
	$("#dialog").dialog("move",{top:$(document).scrollTop()+100});  
	$('#fm').form('clear');
}

function editRole(){
	var row = $('#datagrid').datagrid('getSelected');
	if (row){
    	$('#dialog').dialog('open').dialog('setTitle','修改角色权限');
    	$("#dialog").dialog("move",{top:$(document).scrollTop()+100});  
    	$('#fm').form('clear');
		$('#fm').form('load',row);
		var permissionIds = row.permissions_ids;
		if(permissionIds!=null && permissionIds!=""){
			$.each(permissionIds.split(","),function(i,n){
				$("input[name=perm_ids][value="+n+"]").each(function(){
					$(this).attr("checked",true);
				});
			});	
		}
		
	}else{
		$.messager.alert('警告', '请先选择编辑的选项');
	}
}

function editMenu(){
	var row = $('#datagrid').datagrid('getSelected');
	if (row){
    	$('#dialog-menu').dialog('open');
    	$('#fm-menu').form('clear');
		$('#fm-menu').form('load',row);
		var menuIds = row.menu_ids;
		if(menuIds!=null && menuIds!=""){
			$.each(menuIds.split(","),function(i,n){
				$("input[name=menu_ids][value="+n+"]").each(function(){
					$(this).attr("checked",true);
				});
			});	
		}
	}else{
		$.messager.alert('警告', '请先选择编辑的选项');
	}
}

function delRole(id){
	$.messager.confirm('删除角色','你确定要删除这个角色吗?',function(r){
	    if (r){  
			$.getJSON('roleDel',{'id':id},function(data){
				if(data.result=="success"){
					$('#datagrid').datagrid('reload');
				}else{
	        		$.messager.show({
	        			title: '出错啦!',
	        			msg: data.message
	        		});
				}
			});
	    }  
	});
}

/**
 * 创建/更新会员信息
 */
function post(){
	var submit_url = "roleUpdate";
	//提交表单
	$('#fm').form('submit',{
		url: submit_url,
		onSubmit: function(){
			return $(this).form('validate');
		},
		success: function(result){
			var result = eval('('+result+')');
			if (result.result == "success"){
				$('#datagrid').datagrid('reload');
				$('#dialog').dialog('close');
			}else{
				jQuery.messager.show({
					title: '出错啦!',
					msg: result.message
				});
			}
		}
	});
}

function menu_post(){
	$('#fm-menu').form('submit',{
		url: "menuUpdate",
		onSubmit: function(){
			return $(this).form('validate');
		},
		success: function(result){
			var result = eval('('+result+')');
			if (result.result == "success"){
				$('#datagrid').datagrid('reload');
				$('#dialog-menu').dialog('close');
			}else{
				jQuery.messager.show({
					title: '出错啦!',
					msg: result.message
				});
			}
		}
	});
}

</script>

<table id="datagrid"></table>

<!-- 新增/编辑 权限 -->
<div id="dialog" class="easyui-dialog" style="width:600px;height:500px;padding:20px;" closed="true" buttons="#dlg-buttons">
	<form id="fm" method="post" novalidate action="#">
	    <input type="hidden" name="id"/>
		<div class="fitem">
			<label>名称</label>
			<input id="name" name="name" class="easyui-validatebox txt_fm_mmp" required="true"> 
		</div>
		<div class="fitem perms">
			<div id="p1" class="easyui-panel" title="选择权限 <a class='s_all' style='color:red;' href='javascript:void(0);'>全选</a>" style="width:530px;padding:10px;height: 340px;" collapsible="false" minimizable="false" maximizable="false">
			#foreach($p1 in $!rootPerm)
			<lable>$p1.name</lable>
			<ul>
				#foreach($p2 in $!p1.children)
				<li>
					<input type="checkbox" name="perm_ids" value="$p2.id"/> $p2.name
				</li>
				#end
			</ul>
			<div style="clear:both;"></div>
			#end
			</div>
		</div>
	</form>
</div>
<div id="dlg-buttons">
	<a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-ok" onclick="post()">提交</a>
	<a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dialog').dialog('close')">取消</a>
</div>


<!-- 新增/编辑 菜单 -->
<div id="dialog-menu" title="选择菜单 <a class='s_menu_all' style='color:red;' href='javascript:void(0);'>全选</a>" class="easyui-dialog" style="width:600px;height:500px;padding:20px;" closed="true" buttons="#dlg-menu-buttons">
	<form id="fm-menu" method="post" novalidate action="#">
	    <input type="hidden" name="id"/>
		<div class="fitem perms">
			#foreach($p1 in $!rootMenu)
			<lable>$p1.name</lable>
			<ul>
				#foreach($p2 in $!p1.children)
				<li>
					<input type="checkbox" name="menu_ids" value="$p2.id"/> $p2.name
				</li>
				#end
			</ul>
			<div style="clear:both;"></div>
			#end
		</div>
	</form>
</div>
<div id="dlg-menu-buttons">
	<a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-ok" onclick="menu_post()">提交</a>
	<a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dialog-menu').dialog('close')">取消</a>
</div>


